import React from 'react';
import { Modal, Spin, Card, Button } from 'antd';
import { connect } from 'dva';
import StandardTable from '@/components/StandardTable';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

@connect(({ loading, publicdata }) => ({
  loading: loading.effects['publicdata/fetchInjSecAccoDetail'],
  injCustList: publicdata.injCustList,
  injSecAccoDetailData: publicdata.injSecAccoDetailData,
  injSecAccoTaxRateData: publicdata.injSecAccoTaxRateData,
}))
class DetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      injSecAccoId: null,
    };
  }

  componentDidMount() {
    const { onRef } = this.props;
    onRef(this);
  }

  // 获取二级户信息
  getinjSecAccoDetail = (currentPage, pageSize, injSecAccoId) => {
    if (!injSecAccoId) {
      return;
    }
    this.setState({
      injSecAccoId,
    });
    const { dispatch } = this.props;
    if (!injSecAccoId) {
      return;
    }
    // const pageArg = { currentPage, pageSize };
    const values = {
      injSecAccoId,
      // pageArg,
    };
    this.setState({ modalVisible: true });
    dispatch({
      type: 'publicdata/fetchInjSecAccoDetail',
      payload: values,
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { injSecAccoId } = this.state;
    this.getinjSecAccoDetail(pagination.current, pagination.pageSize, injSecAccoId);
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  render() {
    const { modalVisible } = this.state;
    const {
      injSecAccoDetailData,
      injCustList,
      injSecAccoTaxRateData,
      loading = false,
    } = this.props;
    const columns = [
      {
        title: '浮动费率（%）',
        dataIndex: 'floatFeeRatio',
        key: 'floatFeeRatio',
        width: '15%',
      },
      {
        title: '开始年月',
        dataIndex: 'beginYm',
        key: 'beginYm',
        width: '15%',
      },
      {
        title: '结束年月',
        dataIndex: 'endYm',
        key: 'endYm',
        width: '15%',
      },
    ];

    return (
      <Modal
        width={1200}
        title="工伤二级户"
        visible={modalVisible}
        footer={[
          <Button type="primary" onClick={() => this.handleModalVisible(false)}>
            关闭
          </Button>,
        ]}
        onCancel={() => this.handleModalVisible(false)}
        destroyOnClose
      >
        <Spin tip="loading..." spinning={loading}>
          <DescriptionList style={{ margin: '0 24px 24px 24px' }}>
            <Description term="大库名称 ">{injSecAccoDetailData.insAccoName || '--'}</Description>
            <Description term="关联客户名称">{injCustList || '--'}</Description>
            <Description term="二级户名称">
              {injSecAccoDetailData.injSecAccoName || '--'}
            </Description>
            <div style={{ clear: 'both' }} />
            <Description term="二级户编码">
              {injSecAccoDetailData.injSecAccoCode || '--'}
            </Description>
            <Description term="基准费率(%)">{injSecAccoDetailData.feeRatio || '--'}</Description>
          </DescriptionList>
          <Card title="浮动费率" bordered={false}>
            <StandardTable
              selectedRows={[]}
              selectedRowKeys={[]}
              rowSelection={null}
              loading={loading}
              data={injSecAccoTaxRateData}
              rowKey={(_record, index) => index}
              columns={columns}
              pagination={false}
              // onChange={this.handleStandardTableChange}
            />
          </Card>
        </Spin>
      </Modal>
    );
  }
}
export default DetailModal;
